import React, { useEffect, useRef } from "react";
import churu from "./Churu.module.less";
import * as echarts from "echarts";

function ChuRu() {
  const chartRef = useRef(null); // 使用 useRef 来获取 DOM 元素

  useEffect(() => {
    if (chartRef.current) {
      const myChart = echarts.init(chartRef.current);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      const option = {
        title: {
          text: "出入库情况",
          left: "3%",
          top: "6%",
          textStyle: {
            fontSize: 15,
          },
        },
        legend: {
          icon: "circle",
          left: "67%",
        },
        tooltip: {},
        dataset: {
          source: [
            ["product", "出库", "入库"],
            ["1月", 300, 400],
            ["2月", 170, 300],
            ["3月", 200, 380],
            ["4月", 200, 300],
            ["5月", 500, 400],
            ["6月", 550, 390],
            ["7月", 400, 470],
            ["8月", 500, 500],
            ["9月", 320, 190],
            ["10月", 357, 280],
            ["11月", 412, 432],
            ["12月", 321, 456],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [
          {
            type: "bar",
            barWidth: 10,
            barCategoryGap: "10%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  //只要修改前四个参数就ok
                  offset: 0,
                  color: "#6853e9",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#3ca2f9",
                },
              ]),
            },
          },
          {
            type: "bar",
            barWidth: 10,
            barCategoryGap: "10%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  //只要修改前四个参数就ok
                  offset: 0,
                  color: "#95db93",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#19c1a9",
                },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
    }
  }, []); // 空数组表示这个 effect 只在组件挂载时运行一次

  return <div id="box" ref={chartRef} className={churu.box}></div>; // 直接使用 ID，并通过 ref 引用 DOM 元素
}

export default ChuRu;
